<template>
	<cl-dialog
		title="数据汇总"
		width="1100px"
		:visible.sync="visible"
		@close="close"
		:props="{
			top: '6vh'
		}"
	>
		<el-row style="margin-bottom: 20px;" type="flex">
			<el-button-group>
				<el-button :type="type === '新版' ? 'primary' : ''" @click="type = '新版'"
					>新版</el-button
				>
				<el-button :type="type === '旧版' ? 'primary' : ''" @click="type = '旧版'"
					>旧版</el-button
				>
			</el-button-group>
            <cl-flex1 />
            <el-button-group>
                <el-button icon="el-icon-plus" @click="newPromotion()">获取新计划</el-button>
            </el-button-group>
		</el-row>
		<cl-crud v-show="type === '新版'" style="height: 92%; padding: 0" ref="crud" @load="onLoad">
			<cl-pagefull @resize="onResize">
				<!-- 数据表格 -->
				<cl-table v-bind="table" :auto-height="false">
					<cl-empty slot="empty" />
				</cl-table>
				<template #foot>
					<el-row type="flex">
						<cl-flex1 />
						<el-button @click="close">关闭</el-button>
					</el-row>
				</template>
			</cl-pagefull>
		</cl-crud>
		<cl-crud
			v-show="type === '旧版'"
			style="height: 92%; padding: 0"
			ref="crud"
			@load="onOperateLoad"
			:on-refresh="operateRefresh"
		>
			<cl-pagefull @resize="onOperateResize">
				<!-- 数据表格 -->
				<cl-table v-bind="operateTable" :auto-height="false">
					<!-- <cl-empty slot="empty" /> -->
				</cl-table>
				<template #foot>
					<el-row type="flex">
						<cl-flex1 />
						<el-button @click="close">关闭</el-button>
					</el-row>
				</template>
			</cl-pagefull>
		</cl-crud>
	</cl-dialog>
</template>
<script>
export default {
	props: {
		date: {
			type: Array,
			default: () => []
		},
		query: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			type: "新版",
			visible: false,
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				props: {
					maxHeight: 500
				},
				columns: [
					{ type: "index", label: "序号", fixed: true, align: "left", width: 100,},
					{
						label: "计划id",
						prop: "promotion_id",
						align: "left",
                        width: 300,
						showOverflowTooltip: true
					},
                    {
						label: "名称",
						prop: "promotion_name",
						align: "left",
                        width: 300,
						showOverflowTooltip: true
					},
					{ label: "创建日期", prop: "promotion_create_time", align: "left", width: 300,},
				]
			},
			operateTable: {
				"context-menu": ["operateRefresh"],
				props: {
					maxHeight: 500,
					showSummary: true,
					summaryMethod: this.getSummaries
				},
				columns: []
			},
			search: {
				advertiser_id: "",
			},
			summaryArr: []
		};
	},
	methods: {
		open(advertiser_id) {
			this.summaryArr = [];
			this.visible = true;
			const { query } = this;
			this.search = {
				...query,
				advertiser_id: advertiser_id
			};
			this.type = "新版";
		},
		close() {
			this.visible = false;
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.oceanengine)
				.set("dict", {
					api: {
						page: "promotionList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			console.log(123333333);
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onOperateLoad({ ctx, app }) {
			ctx.service(this.$service.oceanengine)
				.set("dict", {
					api: {
						page: "adList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		onOperateResize(h) {
			this.operateTable.props.maxHeight = h;
		},
		async operateRefresh(params, { next, render, done }) {

			const { data_list, data_title, pagination, ...args } = await next(params);

			let columns = (data_title ?? []).map((v, i) => {
				let isFirst = i == 0;
				let len = v.name.length;
				let column = {
					label: v.name,
					prop: v.key,
					width: len <= 4 ? 300 : len * 20,
					align: "center",
					disable: isFirst,
					fixed: isFirst,
					...v,
					formatter: row => {
						let val = row[v.key];
						if (isFirst) return val;
						return val || 0;
					}
				};
				if (isFirst) {
					column.minWidth = 130;
					column.align = "left";
					column.showOverflowTooltip = true;
				}
				return column;
			});
			this.operateTable.columns = [{ type: "index", label: "序号", fixed: true, align: "left", width: 100,}, ...columns];

			render(data_list, pagination);
		},
		getSummaries({ columns, data }) {
			// console.log(columns)
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}

				//    if (column.property === "ratio") {
				// 		if (this.summaryArr.expense) {
				// 			let result = this.summaryArr.achieve / this.summaryArr.expense;
				// 			return result.toFixed(2);
				// 		} else {
				// 			return 0 ;
				// 		}
				// 	}

				for (let i in this.summaryArr) {
					if (column.property == i) {
						// console.log(column.property,this.summaryArr[i])
						return this.summaryArr[i];
					}
				}
			});
		},
		async newPromotion() {
			if (this.type == '新版') {
				await this.$service.oceanengine.newPromotion({advertiser_id: this.search.advertiser_id})
				.then(() => {
					this.$message.success(`获取成功`);
				}) 
			}
			else if (this.type == '旧版') {
				await this.$service.oceanengine.newAd({advertiser_id: this.search.advertiser_id})
				.then(() => {
					this.$message.success(`获取成功`);
				})
			}
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-dialog {
		&__body {
			height: 75vh;
			overflow: hidden;
			.cl-dialog__container {
				height: 100%;
				overflow: hidden;
			}
		}
	}
}
</style>
